<script lang="ts" setup>
import { calc, plus, div, sub, fmt } from 'a-calc'
import { TaxItem } from '../home.vue';

const props = defineProps({
    data: {
        type: Array as PropType<TaxItem[]>,
        default: []
    }
})

const tableHeader = [
    { title: '月份', width: '2' },
    { title: '税前', width: '2.5' },
    { title: '预扣个税', width: '3' },
    { title: '税后', width: '2.5' },
    { title: '实际税负', width: '3' }
]
// 根据data数组的key汇总
const sum = (key) => {
    return props.data.reduce((acc, cur) => {
        return plus(acc, cur[key] || 0)
    }, 0)
}
</script>

<template>
    <view>
        <view class="my-20rpx font-size-26rpx color-#999 line-height-40rpx">
            增值税及附加说明：月十万以内免；月十万以上还需另行计算增值税(1%)、增值税附加税（6%）、印花税、水利基金。
        </view>
        <sar-table bordered>
            <sar-table-row>
                <sar-table-cell v-for="(item, index) in tableHeader" :key="index" :width="item.width">
                    <view class="p-20rpx box-border font-size-24rpx text-center">{{ item.title }}</view>
                </sar-table-cell>
            </sar-table-row>
            <template v-for="(item, index) in data" :key="index">
                <sar-table-row>
                    <sar-table-cell width="2">
                        <view class="p-20rpx box-border font-size-24rpx text-center">{{ item.month }}</view>
                    </sar-table-cell>
                    <sar-table-cell width="2.5">
                        <view class="p-20rpx box-border font-size-24rpx text-center">{{ item.preTax === "" ? "--" :
                            item.preTax }}</view>
                    </sar-table-cell>
                    <sar-table-cell width="3">
                        <view class="p-20rpx box-border font-size-24rpx text-center">{{ item.deduct === "" ? "--" :
                            item.deduct }}</view>
                    </sar-table-cell>
                    <sar-table-cell width="2.5">
                        <view class="p-20rpx box-border font-size-24rpx text-center">{{ item.afterTax === "" ? "--" :
                            item.afterTax }}</view>
                    </sar-table-cell>
                    <sar-table-cell width="3">
                        <view class="p-20rpx box-border font-size-24rpx text-center">{{ item.tax === "" ? "--" :
                            `${item.tax}%` }}</view>
                    </sar-table-cell>
                </sar-table-row>
            </template>
            <sar-table-row
                root-style="background-color: rgba(var(--sar-primary-rgb), var(--sar-button-pale-bg-opacity))">
                <sar-table-cell width="2">
                    <view class="p-20rpx box-border font-size-24rpx text-center">总计</view>
                </sar-table-cell>
                <sar-table-cell width="2.5">
                    <view class="p-20rpx box-border font-size-24rpx text-center">{{ sum("preTax") }}</view>
                </sar-table-cell>
                <sar-table-cell width="3">
                    <view class="p-20rpx box-border font-size-24rpx text-center">{{ sum("deduct") }}</view>
                </sar-table-cell>
                <sar-table-cell width="2.5">
                    <view class="p-20rpx box-border font-size-24rpx text-center">{{ sum("afterTax") }}</view>
                </sar-table-cell>
                <sar-table-cell width="3">
                    <view class="p-20rpx box-border font-size-24rpx text-center">{{ calc(`${sum("deduct")} / ${sum("preTax")} * 100 | !n`, { _fmt: "=2 ~6" }) }}%</view>
                </sar-table-cell>
            </sar-table-row>
        </sar-table>
    </view>
</template>

<style lang="scss" scoped>
</style>